import { t } from 'i18next'
import React, { useLayoutEffect, useState } from 'react'
import { Modal, Trigger } from '@kedacom/react-next'
import { useNotices } from './hooks'
import {
	StyledWrap,
	StyledHeader,
	SplitIcon,
	MsgIcon,
	SettingIcon,
	ExitIcon,
	ReadyIcon,
	WarningIcon,
	ClearIcon,
	StyledNotifyWrap,
	StyledSettingWrap,
	StyledHomeContainer,
	HomeIcon,
} from './style'
import { useGlobalStore } from '@/store/global'
/*
export const COMPANY_INFO = window.__COMPANY_INFO_i18n_key
*/
import { COMPANY_INFO } from '@/utils/constant'
import AboutBrand from './AboutBrand'
import jumpPage from '@/utils/jumpPage'
import { fetchLogOut } from '@/api/global'
import { Avatar } from '../Avatar'
import shallow from 'zustand/shallow'
import { Confirm } from '../Alert'
import { RRWeb } from '@/plugins/log/rrweb'

export default function Header() {
	/*
	isDialogShow 关于弹窗是否展开
	*/
	const [isDialogShow, setDialogShow] = useState<boolean>(false)
	const {
		isLoading,
		hasNew,
		noticeList,
		openNoticePanel,
		closeNoticePanel,
		clearNotification,
		clearAllNotification,
	} = useNotices()
	const { user, serverInfo, SWITCH } = useGlobalStore(
		(state) => ({
			user: state.user,
			serverInfo: state.serverInfo,
			SWITCH: state.SWITCH,
		}),
		shallow
	)
	// toHome 返回home页
	const toHome = () => {
		jumpPage('portal')
	}
	/*
	exit 退出
	*/
	const exit = () => {
		Confirm(t('确定要退出吗？'), () => {
			fetchLogOut()
		})
	}
	/*
	isTrueLink 是否是致邻
	*/
	const [isTrueLink, setTrueLink] = useState(false)
	useLayoutEffect(() => {
		if (navigator.userAgent.includes('TrueLink')) {
			setTrueLink(true)
		}
	}, [])

	return (
		<StyledWrap className="header" style={{ background: isTrueLink ? '#ffffff' : '' }}>
			{!isTrueLink && (
				<StyledHeader className="header-wrap">
					<div className="header-left">
						<div className="company-info" onClick={toHome}>
							{!!COMPANY_INFO.logoUrl && (
								<>
									<div className="compony-logo">
										<img src={COMPANY_INFO.logoUrl} alt="" />
									</div>
									<SplitIcon className="compony-logo-line"></SplitIcon>
								</>
							)}
							<div className="company-title">{t(COMPANY_INFO.systemName)}</div>
						</div>
						<StyledHomeContainer className="home" onClick={toHome}>
							<HomeIcon></HomeIcon>
							{t('首页')}
						</StyledHomeContainer>
					</div>
					<div className="header-right">
						<div className="userInfo">
							<span className="avatar">
								<Avatar
									value={{
										accountType: user?.account_type ?? 1,
										portrait: user?.portrait32,
									}}
									size={24}
								/>
							</span>
							<span title={user?.name}>{user?.name}</span>
						</div>
						<Trigger
							popupAlign={{
								points: ['bc', 'tc'],
								offset: [-90, 15],
							}}
							onOpen={openNoticePanel}
							onClose={closeNoticePanel}
							popup={
								<StyledNotifyWrap>
									<div className="notify-top">
										<span className="notify-title">{t('通知消息')}</span>
										<span className="notify-clear-all" onClick={() => clearAllNotification()}>
											{t('清空')}
										</span>
									</div>
									<div className="line" />
									<div className="notify-list">
										{isLoading ? (
											<div className="loading">{t('加载中，请稍候...')}</div>
										) : (
											<>
												{noticeList.length !== 0 && (
													<ul>
														{noticeList.map((item, index) => {
															return (
																<li className="notify-info-li" key={index}>
																	<WarningIcon></WarningIcon>
																	<div className="notify-info">
																		<div className="notify-type" title={item.desc}>
																			{item.desc}
																		</div>
																		<div className="notify-subject">
																			<a href={item.keyUrl} title={item.subject}>
																				{item.subject}
																			</a>
																		</div>
																	</div>
																	<ClearIcon
																		className="clear-notify"
																		title={t('删除消息')}
																		onClick={() => clearNotification(item.moid)}
																	></ClearIcon>
																</li>
															)
														})}
													</ul>
												)}
												{noticeList.length === 0 && (
													<div className="no-notice">{t('暂无消息')}</div>
												)}
											</>
										)}
									</div>
								</StyledNotifyWrap>
							}
						>
							<MsgIcon>{hasNew && <ReadyIcon></ReadyIcon>}</MsgIcon>
						</Trigger>
						<Trigger
							// popupAlign={{
							// 	points: ['bc', 'tc'],
							// 	offset: [-8, 15],
							// }}
							popupAlign={{
								points: ['bc', 'tc'],
								offset: [0, 15],
							}}
							popup={
								<StyledSettingWrap id="header-aboutBrand__i18n">
									<ul>
										{!serverInfo?.stand_alone && (
											<li>
												<a href="/portal/set#profile">{t('个人设置')}</a>
											</li>
										)}
										{!!SWITCH.help && (
											<li>
												<a href={`./brand/index/help/default.html`}>{t('帮助信息')}</a>
											</li>
										)}
										{!!SWITCH.about && (
											<li onClick={() => setDialogShow(true)}>
												<span>{t('关于')}</span>
											</li>
										)}
									</ul>
								</StyledSettingWrap>
							}
						>
							<SettingIcon />
						</Trigger>
						<ExitIcon title={t('退出')} onClick={exit}></ExitIcon>
					</div>
				</StyledHeader>
			)}
			{/* 
			关于弹窗
			*/}
			<Modal
				className="about-modal"
				open={isDialogShow}
				title={t('关于')}
				onCancel={() => setDialogShow(false)}
				needFooter={false}
				width={400}
				height={300}
			>
				<AboutBrand></AboutBrand>
			</Modal>
			<RRWeb />
		</StyledWrap>
	)
}
